<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
const show=ref(false)
import imgs from '../../assets/images/yisheng.png'
const showKeyboard = ref(false);  
const inputText = ref('');  
const keys = 'abcdefghijklmnopqrstuvwxyz'.split('')
  
function inputKey(key: string) {  
  inputText.value += key; // 将点击的键添加到输入框中  
} 

const router = useRouter();

const fant = () => {
  router.push('/home')
};

const information=() => 
{
  router.push("/wallitmation");
}

const look = () => {
  router.push("/personal");
};

const hisconsultation = () => {
  router.push("/hisconsultation");
};

// const mywallet = () => {
//   router.push("/mywallet");
// };

const mywallet = () => {
  router.push("/purse");
};

const Recommendations=() => {
  router.push("/Recommendations");
};

const reply=() => {
  router.push("/reply");
};


const open=() => 
{
    show.value=true
}

const no=() =>
{
    show.value=false
}

const defaultImageUrl=imgs
const fileInput = ref();  
const imageUrl = ref(defaultImageUrl);  



function triggerFileUpload() {  

  // 触发隐藏的input元素的点击事件  
  fileInput.value.click();  
}  


  
function handleFileUpload(e:any) {  
  const file = e.target.files[0];  
  if (file) {  
    // 这里为了简化，我们直接创建了一个URL对象  
    // 在实际应用中，你可能需要上传文件到服务器并获取URL  
    imageUrl.value = URL.createObjectURL(file);  
  }
  show.value=false;  
} 



</script>

<template>
  <div class="boxs">
    <!-- 头部 -->
    <header>
      <van-nav-bar left-arrow @click-left="fant">
        <template #right>
          <span class="icon_top">
            <img class="cup" src="../../assets/images/gift_cup.png" alt="" />
            <img @click="information"
              class="cups"
              src="../../assets/icon/hdpi/common_nav_message_black_n.png"
              alt=""
            />
          </span>
        </template>
      </van-nav-bar>
    </header>


    <!-- 主体 -->
    <main>
      <div class="gl_box">

        <!-- 板报盒子 -->
        <div class="main_box">
          <div class="file_img" @click="open">
            <img v-if="imageUrl" :src="imageUrl" alt="">
            <div v-else class="upload-placeholder">点击上传图片</div>  
            <input type="file" class="inp_file" @change="handleFileUpload" ref="fileInput">
          </div>
          <div class="flat_infor">
            <span style="color: #3a9be4" class="look" @click="look"
            >查看资料》</span
          >
          </div>
        </div>

        <!-- 底部功能盒子 -->
        <div class="tab_box">
          <!-- 历史问诊 -->
          <div class="div_box" @click="hisconsultation">
            <p>
              <img
                src="../../assets/icon/hdpi/my_icon_historical _inquiry_n.png"
                alt=""
              />
            </p>
            <span>历史问诊</span>
          </div>
          <!-- 我的钱包 -->
          <div class="div_box" @click="mywallet">
            <p>
              <img src="../../assets/icon/hdpi/my_icon_wallet_n.png" alt="" />
            </p>
            <span>我的钱包</span>
          </div>
          <!-- 被采纳的建议 -->
          <div class="div_box" @click="Recommendations">
            <p>
              <img
                src="../../assets//icon/hdpi/my_icon_recommendations_adopted_n.png"
                alt=""
              />
            </p>
            <span>被采纳的建议</span>
          </div>
          <!-- 设置自动回复 -->
          <div class="div_box" @click="reply">
            <p>
              <img
                src="../../assets/icon/hdpi/my_icon_automatic_response_n.png"
                alt=""
              />
            </p>
            <span>设置自动回复</span>
          </div>

        </div>
      </div>

      <div class="mask" v-if="show">
        <div class="layer">
          <button @click="triggerFileUpload">
              更换形象照
          </button>
          <button @click="no">
              取消 
          </button>
        </div>
      </div>

      <!-- <div id="app">  
      <button @click="showKeyboard = true">打开键盘</button>  
    <div v-if="showKeyboard" class="keyboard-popup">  
      <div class="keyboard">  
       
        <button v-for="key in keys" :key="key" @click="inputKey(key)">{{ key }}</button>  
      </div>  
      <div class="input-container">  
        <input type="text" v-model="inputText" placeholder="在这里输入" />  
      </div>  
      <button @click="showKeyboard = false">关闭</button>  
    </div>  
  </div>   -->
    </main>
  </div>
</template>

<style>
.boxs {
  width:100%;
  height: 620px;
  /* overflow: hidden; */
}

header {
  width: 100%;
  height: 50px;
}

.icon_top {
  width: 90px;
  height: 46px;
  line-height: 46px;
}

.cup {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  margin-left: 15px;
}

.cups {
  width: 20px;
  height: 20px;
  margin-bottom: 3px;
}

main {
  flex: 1;
}

.gl_box {
  width: 100%;
  height: calc(100%-46px);
  /* height: 100%; */
}

.main_box {
  width: 100%;
  height: 200px;
  box-shadow: 0 10px 8px -5px rgba(0, 0, 0, 0.2);
  position: relative;
}

.file_img
{
    width: 100%;
    height: 200px;
}

.file_img img
{
    width: 100%;
    height: 100%;
    /* margin-left: 50px; */
}

.flat_infor
{
   width: 100px;
   height: 50px;
   position: absolute;
   right: 10px;
   bottom: 10px;
}

.inp_file
{
    display: none;
}

.tab_box {
  width: 100%;
  height: 400px;
  border-top: 1px solid #ccc;
}

.div_box {
  width: 130px;
  height: 150px;
  align-content: center;
  box-shadow: 2px 2px 15px 2px rgba(0, 0, 0, 0.3);
  margin-top: 30px;
  float: left;
  margin-left: 15px;
  text-align: center;
  border-radius: 10px;
}

.div_box p img {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
}

.div_box span {
  font-size: 14px;
}

.look {
  position: absolute;
  right: 0;
  top: 30%;
}



.image-uploader {  
  width: 200px;  
  height: 200px;  
  border: 1px solid #ccc;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  overflow: hidden;  
  position: relative;  

}

.keyboard-popup {  
  width:100%; 
  height: 100%;  
  background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */  
}  
  
.keyboard {  
 
  grid-template-columns: repeat(3, 1fr);  
  background-color: white;  
  border-radius: 8px;  
}  
  
.keyboard button {  
  padding: 5px 8px;  
  font-size: 15px;  
  cursor: pointer;  
}  
  
.input-container {  
  margin-top: 20px;  
}  
  
.input-container input {  
  padding: 10px;  
  font-size: 16px;  
  color: #666;  
} 

/* 遮罩层 */
.mask
{
    width: 100%;
    height: 100%;
    background: rgba(50, 50, 50, 0.3);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99;
}

.layer
{
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 0;
    left: 0;
}

.layer button
{
    width: 90%;
    height: 40px;
    background: #fff;
    border: none;
    margin-bottom: 10px;
    margin-left: 5%;
    border-radius: 5px;
    color: #61A4EF;
}
</style>
